<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能汇率兑换</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container mt-5">
        <div class="card shadow-lg">
            <div class="card-header bg-primary text-white">
                <h2 class="text-center">智能汇率兑换系统</h2>
                <p class="text-center mb-0">1 USD = 7.0 CNY</p>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="number" id="amount" class="form-control" 
                                   placeholder="输入金额" step="0.01">
                            <select id="currency" class="form-select">
                                <option value="USD">美元 → 人民币</option>
                                <option value="CNY">人民币 → 美元</option>
                            </select>
                        </div>
                        <div id="error-msg" class="text-danger mt-2"></div>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-success w-100 h-100" 
                                onclick="calculate()">立即转换</button>
                    </div>
                </div>

                <div id="result" class="mt-4 text-center fs-4" 
                     style="display: none;">
                    <span id="original" class="text-primary"></span>
                    <span> → </span>
                    <span id="converted" class="text-success"></span>
                </div>

                <div class="instructions mt-4">
                    <h5>使用说明：</h5>
                    <ul>
                        <li>输入金额后选择需要转换的货币类型</li>
                        <li>点击"立即转换"按钮查看结果</li>
                        <li>支持小数点后两位输入</li>
                        <li>自动实时输入验证</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        function calculate() {
            const amount = parseFloat(document.getElementById('amount').value);
            const currency = document.getElementById('currency').value;
            const errorMsg = document.getElementById('error-msg');
            const resultDiv = document.getElementById('result');

            // 输入验证
            if (isNaN(amount) || amount <= 0) {
                errorMsg.textContent = "请输入有效的正数金额";
                resultDiv.style.display = 'none';
                return;
            }
            errorMsg.textContent = '';

            // 汇率计算
            let result, fromCurr, toCurr;
            if (currency === 'USD') {
                result = amount * 7.0;
                fromCurr = 'USD';
                toCurr = 'CNY';
            } else {
                result = amount / 7.0;
                fromCurr = 'CNY';
                toCurr = 'USD';
            }

            // 显示结果
            document.getElementById('original').textContent = 
                `${amount.toFixed(2)} ${fromCurr}`;
            document.getElementById('converted').textContent = 
                `${result.toFixed(2)} ${toCurr}`;
            resultDiv.style.display = 'block';
        }

        // 实时输入验证
        document.getElementById('amount').addEventListener('input', function() {
            const errorMsg = document.getElementById('error-msg');
            if (this.value && (isNaN(this.value) || this.value <= 0)) {
                errorMsg.textContent = "请输入有效的正数金额";
            } else {
                errorMsg.textContent = '';
            }
        });
    </script>
</body>
</html>
